<template>
    <template v-if="user">
        <van-cell title="昵称" is-link to="/user/edit" :value="user.username"
            @click="toEdit('username', '昵称', user.username)" />
        <van-cell title="账号" :value="user.userAccount" />
        <van-cell title="头像" is-link to="/user/edit" @click="toEdit('avatarUrl', '头像', user.avatarUrl)">
            <img style="height: 48px" :src="user.avatarUrl" />
        </van-cell>
        <van-cell title="性别" is-link :value="user.gender === 1 ? '男':'女'" @click="toEdit('gender', '性别', user.gender)" />
        <van-cell title="电话" is-link to="/user/edit" :value="user.phone" @click="toEdit('phone', '电话', user.phone)" />
        <van-cell title="邮箱" is-link to="/user/edit" :value="user.email" @click="toEdit('email', '邮箱', user.email)" />
        <van-cell title="个人标签" @click="updateTags" is-link>
            <van-tag round type="success" v-for="tag in tags">{{tag}}</van-tag>
        </van-cell>
        <van-cell title="自我介绍" is-link  :value="user.profile" @click="toEdit('profile', '自我介绍', user.profile)" />
        <van-cell title="星球编号" :value="user.planetCode" />
        <van-cell title="注册时间" :value="moment(user.createTime).format('YYYY-MM-DD')" />
    </template>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getCurrentUser } from "@/services/user.ts";
import moment from 'moment'
import { useRouter } from "vue-router";
const router = useRouter()
const user = ref();
const tags = ref([])
onMounted( async() => {
    const res = await getCurrentUser();

    
    res.avatarUrl = "data:image/png;base64," + res.avatarUrl
    
    user.value = res
    tags.value = res.tags?.replace(']','').replace('[','').split(',')
    
    
})

const toEdit = (editKey: string, editName: string, currentValue: string)=>{
    router.push({
        path:'/user/edit',
        query:{
            editKey,
            editName,
            currentValue
        }
    })
}
const updateTags = ()=>{
    router.push('/user/update/tags')
}
</script>

<style scoped></style>